import React from 'react';
import _ from 'lodash';

import * as Sys from '../sys';
import { NavLink } from './navlink';
import { SignInStatus } from './sign-in-status';

import logo from '../assets/book.png';
import './page-header.css';

interface IPageHeaderProps {
    current: number,
};

interface IPageHeaderState {
    userName: string,
    authenticated: boolean,
};

export class PageHeader extends React.Component<IPageHeaderProps, IPageHeaderState> {
    constructor(props: IPageHeaderProps) {
        super(props);

        this.state = {
            userName: '',
            authenticated: false,
        }
    }

    static defaultProps: IPageHeaderProps = {
        current: 0,
    };

    render = (): JSX.Element => {
        const base = (window as any).env.base as string;
        const current = (window as any).env.current as string;

        return (
            <header className="ui top fixed inverted menu">
                <a className="header item" href={base}>
                    <img src={Sys.relative(base, logo)} width="32" height="32" alt="Bookstore logo" />
                </a>
                <div className="header item">
                    Book store
                </div>
                <NavLink href={base} active={this.props.current === 10} >Home</NavLink>
                <NavLink href={Sys.relative(current, '/books/')} active={this.props.current === 20} >Books</NavLink>
                <NavLink href={Sys.relative(current, '/demo/')} active={this.props.current === 90} >Demo</NavLink>
                <div className="right menu">
                    <NavLink href={Sys.relative(current, '/about/')} active={this.props.current === 30} >About</NavLink>
                    <div className="item">
                        <SignInStatus />
                    </div>
                </div>
            </header>
        );
    }
};